
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>第1次作业题目二</title>
    <link rel="stylesheet" href="homework1.css">

</head>

<body>
    <h4 style="color:blue; ">&nbsp;&nbsp;&nbsp;欢迎注册会员</h4>
    <div>
        <form>
            <label for="text1">手机号码：</label>
            <input type="text" id="text1" placeholder="11位手机号">
            <span style="color:red;">必填</span>
            <br><br>
            <label for="text2">创建密码：</label>
            <input type="password" id="text2" placeholder="8位密码">
            <span style="color:red;">必填</span>
            <br><br>
            <label for="text3">注册邮箱：</label>
            <input type="text" id="text3" placeholder="例如:wustzz@sina.com">
            <span style="color:red;">必填</span>
            <br><br>
            <label for="text4">&nbsp;&nbsp;&nbsp;&nbsp;验证码：</label>
            <input type="text" id="text4">
            <canvas id="canvas" width="80px" height="25px"></canvas>  
            <script>
                //生成随机数
            function randomNum(min,max){
                return Math.floor(Math.random()*(max-min)+min);
            }
                //生成随机颜色RGB分量
            function randomColor(min,max){
                var _r = randomNum(min,max);
                var _g = randomNum(min,max);
                var _b = randomNum(min,max);
                return "rgb("+_r+","+_g+","+_b+")";
            }
            //先阻止画布默认点击发生的行为再执行drawPic()方法
            document.getElementById("canvas").onclick = function(e){
                e.preventDefault();
                drawPic();
            };
            function drawPic(){
                //获取到元素canvas
                var $canvas = document.getElementById("canvas");
                var _str = "0123456789";//设置随机数库
                var _picTxt = "";//随机数
                var _num = 4;//4个随机数字
                var _width = $canvas.width;
                var _height = $canvas.height;
                var ctx = $canvas.getContext("2d");//获取 context 对象
                ctx.textBaseline = "bottom";//文字上下对齐方式--底部对齐
                ctx.fillStyle = randomColor(180,240);//填充画布颜色
                ctx.fillRect(0,0,_width,_height);//填充矩形--画画
                for(var i=0; i<_num; i++){
                    var x = (_width-10)/_num*i+10;
                    var y = randomNum(_height/2,_height+8);
                    var deg = randomNum(-45,45);
                    var txt = _str[randomNum(0,_str.length)];
                    _picTxt += txt;//获取一个随机数
                    ctx.fillStyle = randomColor(10,100);//填充随机颜色
                    ctx.font = randomNum(15,30)+"px SimHei";//设置随机数大小，字体为SimHei
                    ctx.translate(x,y);//将当前xy坐标作为原始坐标
                    ctx.rotate(deg*Math.PI/180);//旋转随机角度
                    ctx.fillText(txt, 0,0);//绘制填色的文本
                    ctx.rotate(-deg*Math.PI/180);
                    ctx.translate(-x,-y);
                }
                for(var i=0; i<_num; i++){
                    //定义笔触颜色
                    ctx.strokeStyle = randomColor(90,180);
                    ctx.beginPath();
                    //随机划线--4条路径
                    ctx.moveTo(randomNum(0,_width), randomNum(0,_height));
                    ctx.lineTo(randomNum(0,_width), randomNum(0,_height));
                    ctx.stroke();
                }
                for(var i=0; i<_num*10; i++){
                    ctx.fillStyle = randomColor(0,255);
                    ctx.beginPath();
                    //随机画原，填充颜色
                    ctx.arc(randomNum(0,_width),randomNum(0,_height), 1, 0, 2*Math.PI);
                    ctx.fill();
                }
                return _picTxt;//返回随机数字符串
            }
            drawPic();
        </script>
            <br><br>
            <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别：
                <input type="radio" name="sex" value="male" checked="checked"> 男
            </label>
            <label>
                <input type="radio" name="sex" value="female"> 女
            </label>
            <br><br>
            <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生日：
                <input type="date" name="mydate">
            </label><br><br>

            <label for="text5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年龄：</label>
            <input type="text" id="text5">
            <br><br>
            <label for="text6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;籍贯：</label>
            <select name="birthplace1" id="text6">
                <option value="0">湖北省</option>
                <option value="1">江苏省</option>
                <option value="2">湖南省</option>
                <option value="3">山东省</option>
            </select>
            <select name="birthplace2">
                <option value="0">武汉市</option>
                <option value="1">济南市</option>
                <option value="2">无锡市</option>
                <option value="3">长沙市</option>
            </select>
            <br><br>
            <label for="text7">个人学历：</label>
            <select name="school" id="text7">
                <option value="0">本科</option>
                <option value="1">硕士</option>
                <option value="2">博士</option>
                <option value="3">高中</option>

            </select>
            <br><br>
            <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月薪：</label>
            <input type="range" id="score" name="score" min="0.0" max="5000.0" step="100" value="2500.0">
            <span id="msg"></span>
            <br><br><label>个人爱好：</label>
            <label>
                <input type="checkbox" name="like" value="football">唱歌
            </label>
            <label>
                <input type="checkbox" name="like" value="basketball">跑步
            </label><label>
                <input type="checkbox" name="like" value="football">游泳
            </label>
            <br><br>
            <label>个人照片：</label>
            <span method="post" action="#" enctype="multipart/form-data">
                <p></p>
                <div id="test-image-preview" style="border: 1px solid silver; width: 160px; height: 200px; background-repeat: no-repeat; 
                background-position: center;">
                </div>
                <p></p>
                <p>
                    <input type="file" id="test-image-file" name="test">
                </p>
                <p id="test-file-info">没有选择文件</p>
            </span>
            <label for="sss">个人简介：</label><br><textarea name="intro" cols="50" rows="10" id="sss"></textarea>
            <br>
            <input type="submit" value="提交">
            &nbsp; &nbsp;
            <input type="reset" value="重填">
        </form>
    </div>
</body>
<script>
    var msg = document.getElementById("msg");
    window.onload = function () {
        msg.innerHTML = document.getElementById("score").value;
    }
    document.getElementById("score").onchange = function () {
        msg.innerHTML = this.value;
    }
</script>
<script>
    var fileInput = document.getElementById('test-image-file');
    var info = document.getElementById('test-file-info');
    var preview = document.getElementById('test-image-preview');
    fileInput.addEventListener('change', function () { // 监听change事件
        preview.style.backgroundImage = ''; // 清除背景图片
        if (!fileInput.value) {
            info.innerHTML = '没有选择文件';
            return;
        }
        var file = fileInput.files[0]; // 获取File引用
        // 获取File信息:
        info.innerHTML = '文件: ' + file.name + '<br>' + '大小: ' + file.size + '<br>' + '修改: ' + file.lastModifiedDate;
        if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
            alert('不是有效的图片文件!');
            return;
        }
        var reader = new FileReader(); // 读取文件
        reader.onload = function (e) { // 发起一个异步操作来读取文件内容
            var data = e.target.result; // data串形如： '...(base64编码)...' 
            preview.style.backgroundImage = 'url(' + data + ')';
        };
        reader.readAsDataURL(file); // 以DataURL的形式读取文件
    });
</script>


</html>




